<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2</title>
    <style>
    .one{
        width: 1800px;
        height: 930px;
      background-image: url(imag/img7.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      border-style: solid;

    }
    form{
        width: 760px;
        height: 650px;
        position: relative;
        top: 200px;
        left: 1020px;
}
h2{
    font-size: 15px;
    color: white;
    padding-left: 300px;
}
span{
    color: white;
    font-size: 12px;
}
.two,.three,.four,.five,.six,.senven,.eight,.nine{
    width: 300px;
    height: 23px;
    background-color: white;
    margin-left: 15px;
    margin-top: 15px;
    margin-right: 7px;
}
.ten{
    width: 135px;
    height: 27px;
    margin-left: 15px;
}
p{
    color: white;
    font-size: 12px;
}
.bad,.love{
    width: 120px;
    height: 35px;
    margin-left: 80px;
    font-size: 20px;
    color: white;
    background-color:  #6a79cb; 
    border-radius: 5px 5px;
}
.love{
    margin-left: 120px;
}
P input:focus
{border-color: white;
background-color: #55597d;
}


    </style>
</head>
<body>
    <div class="one">
        <form action="">
            <h2>信息登记表</h2>
            <p><span>接收邮箱：</span>
            <input readonly="readonly" class="two"value="myemil@163.com">(不能修改，只能查看)</p>
            <p><span>真实姓名：</span>
                <input type="text" class="three" placeholder="例如：王明"required pattern="^[\u4e00-\u9fa5]{0,}$">(必须填写，只能输入汉字)</p>
             <p><span>真实年龄：</span>
              <input type="number" class="four"required>(必须填写)</p>
            <p><span>出生日期：</span>
            <input type="date" class="five" name="birthday" value="none" required>(必须填写)</p>
             <p><span>电子邮箱：</span>
            <input type="email" class="six" value="12345@126.com"required multiple>(必须填写)</p>  
            <p><span>身份证号：</span>
            <input type="text" class="senven"required pattern="^\d{8,18}|[0-9x] {8,18}|[0-9x]{8,18}? $">(必须填写，能够以数字，字母x结尾的身份证号)</p>  
            <p><span>手机号码：</span>
            <input type="tel" class="eight"required pattern="^\d{11}$">(必须填写)</p>
            <p><span>个人主页：</span>
                <input type="url" class="nine" list="hope" value="http://www.0000.cn"name="xuanze" pattern="^http://([\w-]+\.)+[\w-]+(/[w-./？ %&=]*) ？ $"/>(请选择网址)</p>
                <datalist id="hope">
                    <option>http://www.aaaaa.cn</option>
                    <option>http://www.bbbbb.com</option>
                    <option>"http://www.ccccc.cn"</option>
                </datalist>
            <p><span>幸运颜色：</span>
                    <input type="color" value="#EFC801" class="ten">
                    (选择你喜欢的颜色)</p>
             <div class="happy">
              <input type="submit" class="bad">
              <input type="reset" class="love">
             </div>
        </form>

    </div>
</body>
</html>